<template>
  <div>
    <!-- <el-button @click="add" type="warning"> 创建 </el-button> -->
    <!--弹出框-->
    <!-- <el-dialog :visible.sync="dialogVisible" width="50%" title="创建商城">
      <div class="max-box">
        <div class="uls">
          <div class="uls-it">
            <div class="a2">支付类型:</div>
            <div class="bg-purple_left">
              <el-select v-model="form.propertyId" placeholder="请选择支付类型">
                <el-option
                  v-for="item in arr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.status == 0"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="uls-it">
            <div class="a2">添加商品:</div>
            <div class="bg-purple_left">
              <el-input
                placeholder="请输入内容"
                v-model="input3"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="4">
            <ul class="utis">
              <li
                :class="item.index == axtive ? 'active' : ''"
                v-for="(item, index) in datList"
                :key="index"
                style="cursor: pointer"
                @click="dj(index)"
              >
                {{ item.lable }}
              </li>
            </ul>
          </el-col>
          <el-col :span="20">
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                padding: 0 10px;
                justify-content: space-between;
              "
            > -->
    <!-- 列表 -->

    <!-- <div class="box1">
                <el-table
                  v-loading="loading"
                  :data="articlesList"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column
                    label="序列号"
                    align="center"
                    prop="serialNumber"
                  />
                  <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                      <el-tag type="danger" v-if="scope.row.status === 1"
                        >掉线</el-tag
                      >
                      <el-tag type="success" v-if="scope.row.status === 0"
                        >正常</el-tag
                      >
                      <el-tag type="danger" v-if="scope.row.status === 2"
                        >删除</el-tag
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="创建时间"
                    align="center"
                    prop="createTime"
                  >
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        >修改</el-button
                      >
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="display: flex; justify-content: flex-end">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <template slot="footer">
        <el-button @click="clent">取消</el-button>
        <el-button style="background: #393951; color: #fff">确定</el-button>
      </template>
    </el-dialog> -->
    <!-- 新增分类 -->
    <!--  -->
    <div class="box">
      <div class="a2">支付类型:</div>
      <div class="bg-purple_left">
        <el-select v-model="form.propertyId" placeholder="请选择支付类型">
          <el-option
            v-for="item in arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :disabled="item.status == 0"
          ></el-option>
        </el-select>
      </div>
      <div class="uls-it">
        <el-row>
          <el-col :span="5">
            <div class="a2">添加商品:</div>
            <div class="bg-purple_left">
              <el-input
                placeholder="请输入内容"
                v-model="input3"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-card class="card">
      <div class="fl">商品分类</div>
      <ul class="utis">
        <div class="utis-it">
          <div class="lem">一级类目</div>
          <li
            :class="item.index == axtive ? 'active' : ''"
            v-for="(item, index) in datList"
            :key="index"
            style="cursor: pointer"
            @click="dj(index)"
          >
            {{ item.lable }}
          </li>
        </div>
        <div class="utis-it">
          <div class="lem">二级类目</div>
          <li
            :class="item.index == axtive ? 'active' : ''"
            v-for="(item, index) in datList"
            :key="index"
            style="cursor: pointer"
            @click="dj(index)"
          >
            {{ item.lable }}
          </li>
        </div>
        <div class="utis-it">
          <div class="lem">三级类目</div>
          <li
            :class="item.index == axtive ? 'active' : ''"
            v-for="(item, index) in datList"
            :key="index"
            style="cursor: pointer"
            @click="dj(index)"
          >
            {{ item.lable }}
          </li>
        </div>
      </ul>
    </el-card>
  </div>
</template>

<script>
import { prodshowHomePayType1 } from "@/api/system/shops";
export default {
  data() {
    return {
      dialogVisible: true,
      dialogFormVisible: true,
      input3: "",
      fileList: [],
      loading: false,
      articlesList: [],
      form: {
        name: "",
      },
      arr: [],
      open: false,
      axtive: null,
      datList: [
        {
          index: 0,
          lable: "分类一",
        },
        {
          index: 1,
          lable: "分类二",
        },
        {
          index: 2,
          lable: "分类三",
        },
        {
          index: 3,
          lable: "分类四",
        },
      ],
    };
  },
  mounted() {
    this.getLei();
  },
  methods: {
    // 类别
    getLei() {
      prodshowHomePayType1().then((res) => {
        console.log(res);
      });
    },
    // 新增分类
    xjfl() {
      this.open = true;
    },
    // 取消分类
    cancel() {
      this.open = false;
    },
    // 确定分类
    submitForm() {
      this.open = false;
    },
    dj(index) {
      this.axtive = index;
    },
    handleSelectionChange() {},
    add() {
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    clent() {
      this.dialogVisible = false;
    },
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
    //       files.length + fileList.length
    //     } 个文件`
    //   );
    // },
  },
};
</script>

<style scoped lang="less">
// /deep/ .el-dialog__header {
//   background: #f6f9fc;
//   padding: 15px 15px;
//   border-bottom: 2px solid #e3eaf0;
//   .el-dialog__close {
//     display: none;
//   }
// }
// /deep/ .el-dialog__body {
//   padding: 0;
//   .max-box {
//     width: 100%;

//     .utis {
//       padding: 0px 0px;
//       text-align: center;
//       li {
//         list-style: none;
//         padding: 10px 20px;
//         border: 1px solid #fcfcfc;
//         color: #afacba;
//       }
//       .active {
//         color: #fff;
//         background: #3b3958;
//         border-left: 4px solid #fa5d67;
//       }
//     }

//     .uls {
//       padding: 10px 10px 0 10px;
//       width: 70%;
//       // background: #000;
//       display: flex;
//       justify-content: space-between;
//       .uls-it {
//         width: 100%;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .a2 {
//           margin: 0 0px 0 15px;
//           width: 50%;
//           font-size: 16px;
//           color: #333333;
//         }
//         .bg-purple_left {
//           width: 100%;

//           .el-dropdown__caret-button {
//             background: black;
//           }
//           .el-button--primary {
//             color: #babcbe;
//             // background: #f6f9fc;
//             font-size: 13px;
//           }
//           .el-input__inner {
//             height: 30px;
//             background: #f6f9fc;
//           }
//           input::-webkit-input-placeholder {
//             /* WebKit browsers */
//             color: #babcbe;
//           }
//           .el-input-group__append {
//             // background: black;
//             padding: 0 10px;
//           }
//         }
//       }

//       .bg-purple_right {
//       }
//     }
//   }
// }

// .box1 {
//   margin-top: 10px;
//   width: 100%;
//   height: 350px;
//   // background-color: #fa5d67;
// }
// .a1 {
//   margin-top: 30px;
// }
.dl {
  font-size: 18px;
}
.box {
  margin: 20px 20px;
  .a2 {
    margin: 10px 0;
    font-size: 18px;
  }
}
.utis {
  width: 100%;
  padding: 0px 0px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  .utis-it {
    width: 30%;
    .lem {
      margin: 20px;
      // font-weight: 600;
      font-size: 17px;
    }
    li {
      list-style: none;
      padding: 10px 20px;
      border: 1px solid #fcfcfc;
      color: #afacba;
    }
    .active {
      color: rgb(4, 57, 79);
      background: rgb(188, 229, 246);
      // border-left: 4px solid #fa5d67;
    }
  }
}
.card {
  margin: 0 20px;
}
</style>
